<template>
  <el-dialog
    v-dialogDrag
    :title="bg == 1 ? '新增设备' : '编辑设备'"
    :visible.sync="dialogFormVisible"
    width="750px"
  >
    <el-form
      ref="formdata"
      :model="formdata"
      :rules="rules"
      label-width="100px"
      class="demo-formdata"
      @submit.native.prevent
    >
      <el-form-item
        label="设备名称"
        prop="cameraName"
      >
        <el-input v-model="formdata.cameraName"></el-input>
      </el-form-item>
      <el-form-item
        label="设备类型"
        prop="cameraType"
      >
        <el-select
          v-model="formdata.cameraType"
          placeholder="请选择设备类型"
        >
          <el-option
            label="摄像头"
            value="0"
          ></el-option>
          <el-option
            label="触摸屏"
            value="1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="归属"
        prop="equipmentId"
      >
        <el-cascader
          v-model="formdata.equipmentId2"
          style="width: 100%"
          placeholder="试试搜索：101"
          :options="roomlist"
          filterable
          clearable
          :props="SetKesDept"
          @change="changequui"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label="机位"
        prop="equipm2"
      >
        <el-select
          v-model="formdata.equipm2"
          placeholder="请选择"
        >
          <el-option
            label="正面摄像机"
            value="0"
          ></el-option>
          <el-option
            label="右后方摄像机"
            value="1"
          ></el-option><el-option
            label="右前方摄像机"
            value="2"
          ></el-option><el-option
            label="交互触摸屏"
            value="3"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="ip地址"
        prop="cameraIp"
      >
        <el-input v-model="formdata.cameraIp"></el-input>
      </el-form-item>

      <el-form-item
        label="序列号"
        prop="cameraSerialNumber"
      >
        <el-input
          v-model="formdata.cameraSerialNumber"
          :disabled="bg == 0"
        ></el-input>
      </el-form-item>

      <el-form-item
        label="摄像头账号"
        prop="cameraUser"
      >
        <el-input v-model="formdata.cameraUser"></el-input>
      </el-form-item>
      <el-form-item
        label="摄像头密码"
        prop="cameraPassword"
      >
        <el-input v-model="formdata.cameraPassword"></el-input>
      </el-form-item>

      <!-- <el-form-item
        label="状态"
        prop="status"
      >
        <el-select
          v-model="formdata.status"
          placeholder="请您选择"
        >
          <el-option
            label="启用"
            value="0"
          ></el-option>
          <el-option
            label="锁定"
            value="1"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <div style="clear: both"></div>
    </el-form>

    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="qx">
        取 消
      </el-button>
      <el-button
        type="primary"
        @click="submitForm('formdata')"
      >
        确 定
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { treeEq, addCamera, BgAddCamera } from "@/api";
export default {
  data() {
    var checkoutIP = (rule, value, callback) => {
      const ipRules =
        /^((25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9])\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[1-9]|0)\.(25[0-5]|2[0-4][0-9]|[0-1]{1}[0-9]{2}|[1-9]{1}[0-9]{1}|[0-9]))$/;
      if (!ipRules.test(value)) {
        callback(new Error("ip不合法"));
      } else {
        callback();
      }
    };

    // let validatecameraIp = (rule, value, callback) => {
    //   let isCorrect = true;
    //   if(value !== ''){
    //       let regexp =
    //     /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
    //   let valdata = value.split(",");
    //   if (valdata.length) {
    //     for (let i = 0; i < valdata.length; i++) {
    //       if (regexp.test(valdata[i]) == false) {
    //         isCorrect = false;
    //       }
    //     }
    //   }
    //   }

    //   if (value == "") {
    //     return callback(new Error("请输入iP地址"));
    //   } else if (!isCorrect) {
    //     callback(new Error("请输入正确对ip地址"));
    //   } else {
    //     callback();
    //   }
    // };
    return {
      dialogFormVisible: false,
      bg: 1,
      
      formdata: {
        cameraName: "", // 设备名称
        cameraType: "", // 设备类型
        equipmentId: "", // 设备归属
        equipmentId2:'',
        equipm2: "", // 机位
        cameraIp: "", // ip地址
        cameraSerialNumber: "", //序列号
        cameraUser: "",
        cameraPassword: "",
        // status: "",
      },
      value:[],

      rules: {
        cameraName: [
          { required: true, message: "请输入设备名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        cameraUser: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        cameraPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
          {
            pattern: /^(\w){3,10}$/,
            message: "只能输入3-10个字母、数字、下划线",
          },
        ],
        cameraType: [
          { required: true, message: "请选择设备类型", trigger: "change" },
        ],
        equipmentId2: [
          {
            type:'array',
            required: true,
            message: "请选择设备归属",
            rigger: "blur",
          },
        ],
        equipm2: [{ message: "请选择机位", trigger: "change" }],
        cameraIp: [
          {
            required: true,
            validator: checkoutIP,
            message: "请输入正确的ip地址",
            trigger: "blur",
          },
        ],
        cameraSerialNumber: [
          { required: true, message: "请输入正确的序列号", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]{15}$/,
            message: "请输入15位数字加字母组合的序列号",
            trigger: "blur",
          },
        ],
        status: [
          { required: true, message: "请选择用户状态", trigger: "change" },
        ],
      },
      resetForm() {
        this.$refs["formdata"].resetFields();
      },
      roomlist: [],
      SetKesDept: {
        value: "id",
        label: "title",
      },
    };
  },
  watch:{
    'formdata.equipmentId':function(val){
      this.formdata.equipmentId2 = [10001,202121001,val]
      console.log(this.value)
    }

  },
  mounted() {
    treeEq().then((res) => {
      // 考试地点教室获取
      this.roomlist = res.data;
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.bg == 1) {
            addCamera({
              equipmentId: this.formdata.equipmentId2[2],
              cameraIp: this.formdata.cameraIp,
              cameraName: this.formdata.cameraName,
              cameraPassword: this.formdata.cameraPassword,
              cameraSerialNumber: this.formdata.cameraSerialNumber,
              cameraType: this.formdata.cameraType,
              cameraUser: this.formdata.cameraUser,
              // equipm2: this.formdata.equipm2,
            })
              .then((res) => {
                console.log(res);
                this.$emit("addlist", 0);
                this.dialogFormVisible = false;
              })
              .catch((err) => {
                console.log(err);
              });

            this.dialogFormVisible = false;
            // this.resetForm();
          } else {
            BgAddCamera({
              cameraId: this.formdata.cameraId,
              equipmentId: this.formdata.equipmentId2[2],
              cameraStatus: this.formdata.cameraStatus,
              cameraIp: this.formdata.cameraIp,
              cameraName: this.formdata.cameraName,
              cameraPassword: this.formdata.cameraPassword,
              cameraSerialNumber: this.formdata.cameraSerialNumber,
              cameraType: this.formdata.cameraType,
              cameraUser: this.formdata.cameraUser,
              // equipm2: this.formdata.equipm2,
            })
              .then((res) => {
                console.log(res);
                this.$emit("addlist", 0);
                this.dialogFormVisible = false;
                this.bg = 1;
              })
              .catch((err) => {
                console.log(err);
                this.bg = 1;
              });

            this.dialogFormVisible = false;
            // this.resetForm();
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    changequui(esa){
      console.log(esa)
    },

    qx() {
      this.dialogFormVisible = false;
      this.bg = 1;
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form-item {
  width: 48%;
  float: left;
}
</style>
